<template>
  <div class="login-wrap">
    <div class="header">
      <h3>贝贝无人机</h3>
      <p>信息化管理平台</p>
    </div>

    <div class="flex align-center justify-center" style="width: 100%; height: 86%;">

      <div style="position: relative" class="flex align-center justify-center">
        <div class="alert">
          <t-alert v-if="success" theme="success" :message="message" close></t-alert>
          <t-alert v-if="error" theme="error" :message="message" close></t-alert>
        </div>

        <t-card :bordered="false" class="card">
          <template #title>欢迎使用信息化管理</template>
          <t-form
            ref="form"
            :class="['item-container', `login-${type}`]"
            :data="formData"
            :rules="rules"
            :requiredMark="false"
            label-align="top"
            @submit="onSubmit"
          >
            <t-form-item name="phone">
              <template #label>手机号</template>
              <t-input v-model="formData.phone" size="large" :maxlength="11" placeholder="请输入您的手机号">
                <template #prefix-icon>
                  <user-icon />
                </template>
              </t-input>
            </t-form-item>

            <t-form-item name="code" style="margin-bottom: 38px;">
              <template #label>口令码</template>
              <t-input v-model="formData.code" size="large" :maxlength="6" placeholder="请输入验证码" key="verifyCode" />
            </t-form-item>

            <t-form-item style="margin-bottom: 16px;">
              <t-button block type="submit" size="large" class="submit" :loading="loading">登录</t-button>
            </t-form-item>
            <!--<t-divider />-->
            <!--<p class="hint">-->
            <!--  注册登录即代表同意-->
            <!--  <span class="link">《用户协议》</span>-->
            <!--  <span class="link">《隐私政策》</span>-->
            <!--</p>-->
          </t-form>
        </t-card>
      </div>
    </div>
  </div>
</template>
<script>
import { UserIcon } from 'tdesign-icons-vue';

export default {
  name: 'LoginIndex',
  components: {
    UserIcon,
  },
  data() {
    return {
      rules: {
        phone: [{ required: true, message: '手机号必填', type: 'error' }],
        code: [{ required: true, message: '口令码必填', type: 'error' }],
      },
      formData: {
        phone: '', // 手机号
        code: '', // 口令码
      },
      type: 'login',
      countDown: 0,
      intervalTimer: null,
      loading: false,

      success: false,
      error: false,
      message: ''
    };
  },
  methods: {
    async onSubmit({ validateResult }) {
      if (validateResult === true) {
        this.success = false
        this.error = false
        this.loading = true
        try {
          const res = await this.$store.dispatch('user/login', this.formData);
          this.success = true
          this.message = res.retmsg
          setTimeout(()=> {
            this.success = false
            this.$router.replace('/').catch(() => '');
          }, 2000)
        }catch (err) {
          this.error = true
          this.message = err.retmsg
          setTimeout(()=> {
            //this.error = false
          }, 2000)
          console.log(err)
          this.loading = false
        }
      }
    },
    //handleCounter() {
    //  this.countDown = 60;
    //  this.intervalTimer = setInterval(() => {
    //    if (this.countDown > 0) {
    //      this.countDown -= 1;
    //    } else {
    //      clearInterval(this.intervalTimer);
    //      this.countDown = 0;
    //    }
    //  }, 1000);
    //},
    //switchType(val) {
    //  this.type = val;
    //},
  },
};
</script>

<style>
body {
  background-color: rgba(240, 243, 246, 1);
}
</style>

<style lang="less" scoped>
/deep/ .t-input {
  background-color: #FFFFFF;
}

.login-wrap {
  padding: 50px 72px;
  height: 100vh;

  .header {
    display: flex;
    color: #000000;
    align-items: center;

    h3 {
      margin-right: 11px;
      font-size: 18px;
      font-weight: 700;
      line-height: 21.6px;
    }

    p {
      font-size: 14px;
      font-weight: 400;
      line-height: 21.6px;
    }
  }
}

/deep/ .alert {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  margin-bottom: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  //transform: translateX(-50%);

  .t-alert {
    background-color: #FFFFFF!important;
  }
}

.verification-code {
  margin-bottom: 38px;
  position: relative;

  .code-btn {
    position: absolute;
    z-index: 99;
    right: 16px;
    font-size: 17px;
  }
}

.submit {
  //height: 56px;
  font-size: 16px;
  font-weight: 600;
  border-radius: var(--td-radius-round);
}

.hint {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  text-align: left;
  color: var(--td-font-gray-3);

  .link {
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    line-height: 22px;
    text-align: left;
  }
}

/deep/ .card {
  position: relative;
  width: 458px;
  margin: 0 auto;
  border-radius: 12px;
  border: 1px solid rgba(224, 224, 224, 1);

  .t-card__header {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
    padding-bottom: 0;
  }

  .t-card__title {
    font-size: 16px;
    font-weight: 600;
    line-height: 44px;
    text-align: left;
    color: rgba(0, 0, 0, 1);
  }

  .t-card__body {
    padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
  }
}
</style>
